<template>
  <div class="detail container">
    <template>
      <el-card class="box-card">
        <div class="clearfix">
          <span style="font-size:22px;">题库详情</span>
          <el-button type="primary" style="float: right;margin-left:10px" @click="back">返回</el-button>
          <el-button
            id="add_group"
            style="float: right;"
            type="primary"
            @click="handleEdit(false)"
          >添加题目</el-button>

          <!-- <el-button type="text" >打开嵌套 Form 的 Drawer</el-button> -->
          <el-drawer
            :title="!form.ID?'添加题目':'修改题目'"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            :with-header="false"
            :wrapperClosable="false"
          >
            <div class="demo-drawer__content">
              <!-- ------------- -->
              <subject v-bind="{formData:form, setData}"></subject>
              <div class="demo-drawer__footer">
                <el-button @click="dialog = false;">取 消</el-button>
                <el-button v-text="!form.ID?'确认':'修改'" type="primary" @click="handleClose"></el-button>
              </div>
            </div>
          </el-drawer>
        </div>
      </el-card>

      <!-- 表格 -->
      <el-table
        height="100%"
        :data="detailData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
      >
        <el-table-column label="序号" prop="ID"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="知识点" prop="knowledgepoints"></el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import subject from "./subject/index.vue";
export default {
  name: "detail",
  data() {
    return {
      detailData: [],
      search: "",
      dialog: false,
      formLabelWidth: "80px",

      form: {}
    };
  },
  methods: {
    //多选答案
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.arr1.length;
      console.log(this.newarr1.toString());
      this.data.answer.ans2 = this.newarr1;
    },
    //编辑
    handleEdit(row) {
      let f;
      if (row) {
        f = JSON.parse(JSON.stringify(row));
      } else {
        f = {
          ID: "",
          name: "",
          type: "",
          date1: "",
          delivery: false,
          resource: "",
          desc: "",
          analysis: "",
          knowledgepoints: "",
          itembankgroupid: this.$route.params.id,
          data: {
            单选: [],
            多选: [],
            填空: [],
            解答: "",
            answer: []
          }
        };
      }
      this.dialog = true;
      this.form = f;
    },
    //删除
    handleDelete(index, row) {
      this.axios({
        method: "post",
        url: "/v4/backAdmin/delitembank",
        data: {
          ID: row.ID
        }
      })
        .then(data => {
          console.log(data, 111);
          if (data.status == 200) {
            this.axios({
              method: "post",
              url: "/v4/teacher/getitembank"
            })
              .then(data => {
                console.log(data.data);
                this.detailData = data.data.data;
              })
              .catch(err => {
                console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.$message({
        message: "删除成功",
        type: "success"
      });
    },
    //返回
    back() {
      this.$router.push("/");
    },
    //点击 确认 关闭
    handleClose() {
      //存储到服务器中
      this.axios({
        method: "post",
        url: "/v4/backAdmin/createitembank",
        data: this.form
      })
        .then(data => {
          console.log(data);
          if (data.status == 200) {
            this.axios({
              method: "post",
              url: "/v4/teacher/getitembank"
            })
              .then(data => {
                console.log(data);
                this.detailData = data.data.data.filter(
                  item => item.itembankgroupid == this.$route.params.id
                );
                this.dialog = false;
              })
              .catch(err => {
                console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //点击取消
    change(val) {
      console.log(val);
    },
    setData(data) {
      this.form = data;
    }
  },
  components: {
    subject
  },
  created() {
    this.axios({
      method: "post",
      url: "/v4/teacher/getitembank"
    })
      .then(data => {
        console.log(data);
        console.log(
          data.data.data.filter(
            item => item.itembankgroupid == this.$route.params.id
          )
        );
        this.detailData = data.data.data.filter(
          item => item.itembankgroupid == this.$route.params.id
        );
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-card {
  margin: 12px 0;
}
.el-drawer__open .el-drawer.rtl {
  overflow: auto !important;
}
.el-table--fit {
  margin-bottom: 50px;
}
</style>
